<template>
  <div id="userDetailPage">
    <breadcrumb-component :breadcrumbItems="breadcrumbItems" />
    <a-card title="用户详情" :loading="loading">
      <a-descriptions bordered :column="1">
        <a-descriptions-item
          v-for="detail in tableConfigData"
          :key="detail.key"
          :label="detail.name"
        >
          <template v-if="detail.key === 'roles'">
            <a-tag color="#2F54EB" v-for="role in detail.value" :key="role">{{
              role
            }}</a-tag>
          </template>
          <template v-else-if="detail.key === 'status'">
            <a-tag
              :bordered="false"
              color="processing"
              v-if="Number(detail.value) === 1"
              >启用</a-tag
            >
            <a-tag :bordered="false" v-else>禁用</a-tag>
          </template>
          <template v-else-if="detail.key === 'updatedAt'">
            {{ $formatDate(detail.value as string) }}
          </template>
          <template v-else>
            {{ detail.value }}
          </template>
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
    <BackButton />
  </div>
</template>

<style scoped>
.detail-table {
  width: 100%;
  border-collapse: collapse;
}

.detail-table th,
.detail-table td {
  padding: 12px;
}

.detail-table th {
  text-align: right;
  color: #666;
}
</style>

<script lang="ts" setup>
import { onMounted, computed, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { userApi } from "@/api";
import BreadcrumbComponent from "@/components/BreadcrumbComponent.vue";
import BackButton from "@/components/BackButton.vue";
interface UserDetail {
  id: string;
  username: string;
  email: string;
  roles: Array<string>;
  status: string;
  lastLoginTime: string;
  updatedAt: string;
  updatedBy: string;
}

const breadcrumbItems = [
  { url: "/user", name: "用户管理" },
  { url: "", name: "用户详情" },
];
const route = useRoute();
const userDetail = reactive<UserDetail>({
  id: "",
  username: "",
  email: "",
  roles: [],
  status: "",
  lastLoginTime: "",
  updatedAt: "",
  updatedBy: "",
});

const tableConfigData = computed(() => [
  { key: "id", name: "用户ID", value: userDetail.id },
  { key: "username", name: "用户名", value: userDetail.username },
  { key: "email", name: "邮箱", value: userDetail.email },
  { key: "roles", name: "角色", value: userDetail.roles },
  { key: "status", name: "状态", value: userDetail.status },
  {
    key: "lastLoginTime",
    name: "最近登录时间",
    value: userDetail.lastLoginTime,
  },
  { key: "updatedBy", name: "修改人", value: userDetail.updatedBy },
  { key: "updatedAt", name: "修改时间", value: userDetail.updatedAt },
]);

const loading = ref(true);
onMounted(async () => {
  const userId = Number(route.params.id);
  try {
    loading.value = true;
    const { data } = await userApi.getUserDetail(userId);
    Object.assign(userDetail, data);
  } catch (error) {
    console.error("获取用户详情失败", error);
  } finally {
    loading.value = false;
  }
});
</script>
<style></style>
